import React, { Component } from "react"
import { MyFoot } from './components/foot'
import { Allcpt } from './components/allcpt'
import { Cptrules } from './components/cptrules.jsx'
import Reactstyle from './components/reactstyle.jsx'
import Eventdemo from './components/eventdemo.jsx'
import ReduxDemo from "./redux"
import MyIndex from '@/components'
import State1Demo from "./components/state_1"
import PropDemo from "./components/props"
import DataDemo from "./components/dataDemo"

export default class App extends Component {
    constructor() {
        super()
    }
    render() {
        return (
            <div>
                <h4>App - 根组件</h4>
                {/* <PropDemo /> */}
                {/* <ReduxDemo /> */}
                {/* <State1Demo /> */}
                {/* <Reactstyle></Reactstyle> */}
                {/* <Eventdemo></Eventdemo> */}
                {/* <Demo></Demo> */}
                {/* <Allcpt></Allcpt>
                <Cptrules></Cptrules> */}
                {/* <MyIndex></MyIndex> */}
                {/* <DataDemo /> */}
                <MyFoot></MyFoot>
            </div>
        )
    }
}


class Demo extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div>
                <h2>Demo-Demo</h2>
                <p>react 组件书写extends</p>
                <MyFind></MyFind>
            </div>
        )
    }
}
// class 继承的类组件
class MyFind extends Component {
    render() {
        return (

            <div>
                <p>MyFind-MyFind-MyFind</p>
                <MyLove></MyLove>
                <MyNames></MyNames>
            </div>
        )
    }
}


// function纯函数

function MyLove() {
    return (
        <div>
            纯函数
            <MyNames></MyNames>
        </div>
    )
}

const MyNames = () => (<div>箭头函数写法</div>)